<template>
    <div class="swiper">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item,index) in images" :key="item.encodeId">
                <div class="imgitem">
                    <img :src="item.imageUrl" alt="加载失败">
                    <div class="libox" :style="{backgroundColor:item.titleColor}">{{item.typeTitle}}</div>
                </div>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>


<script>
import {getBanner } from 'api/tabbar/index'
export default {
    name:'swiper',
    data() {
        return {
             images: [],
        };
    },
     methods:{
        // 获取到首页的轮播图
        async getBanners(){
          let res = await getBanner()
          this.images = res.banners
        }
    },
    created(){
       this.getBanners()
    }
};
</script>

<style scoped lang="scss">
.swiper{
    padding: .15rem .1rem;
    // background-color: #F1F3F2;
    background-image: linear-gradient(#F5F5F5, #FFFFFF);
    .van-swipe{
        border-radius: .2rem;
    }
    .imgitem{
        position: relative;
        .libox{
            position: absolute;
            bottom: .035rem;
            right: 0px;
            padding: .04rem;
            border-radius: 15px 5px;
            color: #fff;
        }
    }
    img{
        width: 3.75rem;
    }
}
</style>
